import { Component } from '@angular/core';
import { FormControl, FormGroup, NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { NzFormModule } from 'ng-zorro-antd/form';
// import { CommonModule } from '@angular/common';
import { NzInputModule } from 'ng-zorro-antd/input';
// import { RouterOutlet } from '@angular/router';
// import { NzIconModule } from 'ng-zorro-antd/icon';
// import { NzLayoutModule } from 'ng-zorro-antd/layout';
// import { NzMenuModule } from 'ng-zorro-antd/menu';

// ReactiveFormsModule // [formGroup] 用
// NzFormModule  // <nz-form-item> 等用
// NzInputModule // <nz-input-group nzPrefixIcon="user"> 用

// CommonModule, RouterOutlet, NzIconModule, NzLayoutModule, NzMenuModule

// import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzButtonModule } from 'ng-zorro-antd/button'; // [nzType] 用

// import { BrowserModule } from '@angular/platform-browser';
// import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// ng add @ant-design/icons-angular
// # or npm install @ant-design/icons-angular
// import { IconModule } from '@ant-design/icons-angular';

// port { forwardRef } from '@angular/core';
// import { NG_VALUE_ACCESSOR } from '@angular/forms';


@Component({
  selector: 'app-login',
  standalone: true,
  imports: [NzFormModule, ReactiveFormsModule, NzInputModule, NzButtonModule],
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  // providers: [
  //   {
  //     provide: NG_VALUE_ACCESSOR,
  //     useExisting: forwardRef(() => LoginComponent),
  //     multi: true,
  //   }
  // ]
})
export class LoginComponent {
  validateForm: FormGroup<{
    userName: FormControl<string>;
    password: FormControl<string>;
    remember: FormControl<boolean>;
  }> = this.fb.group({
    userName: ['', [Validators.required]],
    password: ['', [Validators.required]],
    remember: [true]
  });

  submitForm(): void {
    if (this.validateForm.valid) {
      console.log('submit', this.validateForm.value);
    } else {
      Object.values(this.validateForm.controls).forEach(control => {
        if (control.invalid) {
          control.markAsDirty();
          control.updateValueAndValidity({ onlySelf: true });
        }
      });
    }
  }

  constructor(private fb: NonNullableFormBuilder) {}
}
